Components 组件

Teek 有两大组件类型：

• 公共组件
• 主题组件

公共组件

公共组件是一些基础的组件，能够独立使用，在公共组件专题会提供 Demo 使用实例。

主题组件

主题组件是基于 VitePress 主题开发的组件，需要配合 VitePress 使用，因此主题组件专题仅介绍如何在 VitePress 中引入并使用，当您想在其他 VitePress 主题或 VitePress 默认主题下单独引入 Teek 的部分组件时可以参考。

警告

如果您在 .vitepress/theme/index.ts 已经引入 Teek，则无需单独引入主题组件。

在按需引入主题组件前，您必须先在 .vitepress/config.mts 中引入 Teek 的配置加载器。

// .vitepress/config.mts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({});

export default defineConfig({
  extends: teekConfig,
});

Teek 的大部分组件并不是采用 props 来传入配置项，而是通过如下两种方式：

1. 在 config.mts 文件通过 defineTeekConfig({}) 添加组件的配置项
2. 在入口组件通过 provide(teekConfigContext, {}) 添加组件的配置项，provide 方式在主题组件的文章里会进行说明

provide 方式优先级大于 defineTeekConfig 方式。

defineTeekConfig 函数内部会进行一些 Vite 插件的初始化，有关 Vite 插件的介绍和如何禁用请看 Vite 插件。

除此之外，defineTeekConfig 函数会注册 Teek 内置的 Markdown 拓展，有关 Markdown 拓展的介绍请看 Markdown 拓展。

提示

本专题仅介绍如何引入 Teek 的主题组件，每个组件所需要的配置项请看对应的 主题配置。